<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>화제의 제품 추가</h2>
		</div>

		<form id="insertHotProduct" class="form-horizontal" role="form" method="post" action="hotProduct.do">
			<fieldset>
				
				<div class="form-group">
					<label for="isTop" class="col-md-2 control-label">Top 여부</label>
					<div class="col-md-10">
						<label class="radio-inline"><input type="radio" name="isTop" value="1"> Y</label>
						<label class="radio-inline"><input type="radio" name="isTop" value="0"> N</label>
					</div>
				</div>
				
				<div class="form-group">
					<label for="firtCategory" class="col-md-2 control-label">카테고리</label>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-6">
								<select class="form-control" name="firstCategory">
									<option value="default">- 1차카테고리 -</option>
									<c:forEach items="${first}" var="first">
										<option value="${first.idFirstCategory}">${first.firstCategoryText}</option>
									</c:forEach>
								</select>
							</div>
							<div class="col-md-6">
								<select class="form-control" name="secondCategory">
									<option value="default">- 1차를 먼저 선택하여 주세요 -</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<label for="product" class="col-md-2 control-label">제품</label>
					<div class="col-md-10">
						<select name="product" class="form-control">
							<option value="default">- 카테고리를 먼저 선택하세요 -</option>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="promotionText" class="col-md-2 control-label">프로모션 텍스트</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="promotionText" placeholder="프로모션 텍스트를 입력하세요"/>
					</div>
				</div>

				<div class="form-group">
					<label for="start_date" class="col-md-2 control-label">노출시작</label>
					<div class="col-md-10">
						<input type="date" class="form-control" name="start_date">
					</div>
				</div>
				
				<div class="form-group">
					<label for="end_date" class="col-md-2 control-label">노출종료</label>
					<div class="col-md-10">
						<input type="date" class="form-control" name="end_date">
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">저장하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>

					</div>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("select[name='firstCategory']").change(function() {
				$("select[name='secondCategory']").empty();
				
				var first = $(this).find("option:selected").val();
				
				$("select[name='thirdCategory'] option").remove();
				$("select[name='thirdCategory']").append("<option value='default'>- 2차를 먼저 선택하여 주세요 -</option>");
				
				$.ajax({
					url: "ajax/first.jsp",
					data: "first=" + first,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idSecondCategory = $(this).find("idSecondCategory").text();
							var secondCategoryText = $(this).find("secondCategoryText").text();
							
							var option = $("<option>").html(secondCategoryText);
							option.attr({'value' : idSecondCategory});
							
							$("select[name='secondCategory']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
			$("select[name='secondCategory']").change(function() {
				$("select[name='product']").empty();
				
				var second = $(this).find("option:selected").val();
				
				$.ajax({
					url: "ajax/product.jsp",
					data: "second=" + second,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					async: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idProduct = $(this).find("idProduct").text();
							var productTitle = $(this).find("productTitle").text();
							
							var option = $("<option>").html(productTitle);
							option.attr({'value' : idProduct});
							
							$("select[name='product']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
			
		});
	</script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#insertHotProduct").submit(function() {
				
				if (!$("input[name='isTop']").is(":checked")) {
					alert("Top 여부를 선택해 주세요");
					$("input[name='isTop']").focus();
					return false;
				}
				
				if ($("select[name='firstCategory'] > option:selected").index() < 1) {
					alert("1차 카테고리를 선택하세요.");
					return false;
				}
				
				if ($("select[name='secondCategory'] > option:selected").index() < 1) {
					alert("2차 카테고리를 선택하세요.");
					return false;
				}
				
				if ($("select[name='product'] > option:selected").index() < 1) {
					alert("제품을 선택하세요.");
					$("select[name='product']").focus();
					return false;
				}
				
				if (!$("input[name='promotionText']").val().isValue()) {
					alert("프로모션 텍스트를 입력하세요.");
					$("input[name='promotionText']").focus();
					return false;
				}
				
				if (!$("input[name='start_date']").val().isValue()) {
					alert("노출시작을 입력하세요.");
					$("input[name='start_date']").focus();
					return false;
				}
				
				if (!$("input[name='end_date']").val().isValue()) {
					alert("노출종료를 입력하세요.");
					$("input[name='end_date']").focus();
					return false;
				}
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
				
			});
		});
	</script>
  </body>
</html>